<template>
  <div>
    <!-- 按钮 -->
    <el-button style="margin:10px" type="primary" icon="el-icon-refresh-right" circle
      @click="pageAdvertisementRecordList"></el-button>
    <!--    <el-input placeholder="请输入搜索内容在点击搜索" v-model="searchText" style="width:300px;background-color: #fff;">
      <el-button slot="append" icon="el-icon-search" @click="pageAdvertisementRecordList"></el-button>
    </el-input>
    <el-button style="margin:10px" @click="reSetting">重置</el-button> -->
    <!-- 表格
      data 展示数据 —— 数组类型
    -->
    <el-table style="width: 100%;" border :data="list">
      <!--     <el-table-column
            type="selection"
            width="55">
          </el-table-column> -->
      <el-table-column prop="id" label="id" width="80" align="center">
      </el-table-column>
      <el-table-column prop="name" label="个人/公司名称" align="center">
      </el-table-column>
      <el-table-column prop="contactPhone" label="联系电话" align="center">
      </el-table-column>
      <el-table-column prop="city" label="代理城市" align="center">
      </el-table-column>
      <el-table-column label="联系结果" align="center" width="100"
        :filters="[{ text: '不合适', value: '-1' }, { text: '未联系', value: '0' }, { text: '已联系', value: '1' }]"
        :filter-method="filterTag" filter-placement="bottom-end">
        <template slot-scope="{ row, $index }">
          <p v-if="row.scheduleStatus == -1">不合适</p>
          <p v-else-if="row.scheduleStatus == 0">未联系</p>
          <p v-else>已联系</p>
        </template>
      </el-table-column>
      <el-table-column prop="scheduleReason" label="联系进程" align="center">
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="{ row, $index }">
          <template v-if="row.scheduleStatus != -1">
            <el-popconfirm title="确认更新？" icon="el-icon-info" icon-color="red" @confirm="getPassDynamic(row.id)">
              <el-tooltip content="更新联系进程" placement="top" slot="reference">
                <el-button type="success" icon="el-icon-check"></el-button>
              </el-tooltip>
            </el-popconfirm>
            <el-popconfirm style="margin-left:10px" title="确认不合适？" icon="el-icon-info" icon-color="red"
              @confirm="getRejectDynamic(row.id)">
              <el-tooltip content="不合适" placement="top" slot="reference">
                <el-button type="danger" icon="el-icon-close"></el-button>
              </el-tooltip>
            </el-popconfirm>
          </template>
          <template v-else>
            <el-popconfirm title="是否删除该记录？" icon="el-icon-info" icon-color="red" @confirm="getDelete(row.id)">
              <el-tooltip content="删除记录" placement="top" slot="reference">
                <el-button type="danger" icon="el-icon-delete"></el-button>
              </el-tooltip>
            </el-popconfirm>
          </template>
        </template>



      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination style="margin-top:20px;textAlign:center" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 50, 100]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    name: 'JoinAudit',
    mounted() {
      //获取列表数据方法
      this.pageAdvertisementRecordList()
    },
    data() {
      return {
        //页码
        pageNumber: 1,
        //每页数量
        pageSize: 10,
        //总条数
        total: 0,
        //列表数据
        list: [],
        // ids:[],
        //搜索
        searchText: '',
      }
    },
    computed: {

    },
    methods: {
      //时间格式化
      dateFormat(row) {
        return moment(row.extensionStartTime * 1000).format("YYYY-MM-DD");
        // return moment(row.startTime * 1000).format("YYYY-MM-DD HH:mm:ss");
      },
      //      handleSelectionChange(val){
      //        console.log(val)
      //        this.ids = val.map((item, index) => {
      // 						return item.id;
      // 					}).join(",");
      //           console.log(this.ids)

      //      },
      async pageAdvertisementRecordList() {
        let res = await this.$API.members.getPageList({
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          orderBY: '',
        })
        console.log(res)
        this.total = res.data.sumLine;
        this.list = res.data.rows.reverse();
      },
      reSetting() {
        this.searchText = '';
        this.pageAdvertisementRecordList();
      },
      async getPassDynamic(id) {
        let obj = this.list.filter(item => item.id == id)
        obj[0].scheduleStatus = 1
        obj[0].scheduleReason = prompt('联系进度：');
        if (obj[0].scheduleReason != null && obj[0].scheduleReason != "") {
          let res = await this.$API.members.updateCooperation(obj[0])
          this.pageAdvertisementRecordList()
        }
      },
      async getRejectDynamic(id) {
        let obj = this.list.filter(item => item.id == id)
        obj[0].scheduleStatus = -1
        obj[0].scheduleReason = prompt('不合适原因：');
        if (obj[0].scheduleReason != null && obj[0].scheduleReason != "") {
          let res = await this.$API.members.updateCooperation(obj[0])
          this.pageAdvertisementRecordList()
        }
      },
      async getDelete(id) {
        let res = await this.$API.members.deleteCooperation({
          id
        })
        this.pageAdvertisementRecordList();
      },
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pageSize = val
        this.pageAdvertisementRecordList()
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.pageNumber = val
        this.pageAdvertisementRecordList()
      },
      filterTagTG(value, row) {
        console.log(value, row)
        return row.status == value;
      },
      filterTag(value, row) {
        console.log(value, row)
        return row.auditStatus == value;
      },
      filterHandler(value, row, column) {
        // const property = column['property'];
        // return row[property] === value;
      }
    }
  }
</script>

<style>

</style>